import dayjs from "dayjs";
import { BorderBox10, BorderBox11 } from "@jiaminghi/data-view-react";
import { CountDown, Toast } from "mooli-mobile";
import { dataStatistics, team, newOrder, emp, viewList } from "./api/home";
import { useEffect, useState } from "react";
import "./App.css";

export const getParameterByName = (name?: string, URL?: string) => {
  let url = URL || document.location.toString();
  let arrObj = url.split("?");
  let params = Object.create(null);
  if (arrObj.length > 1) {
    arrObj = arrObj[1].split("&");
    arrObj.forEach((item) => {
      const curTtem = item.split("=");
      params[curTtem[0]] = curTtem[1];
    });
  }
  if (name) {
    return params[name];
  }
  return params;
};

function App() {
  const [staticData, setStaticData] = useState({});
  const [teamData, setTeamData] = useState([]);
  const [orderData, setOrderData] = useState([]);
  const [empData, setEmpData] = useState([]);
  const [viewData, setViewData] = useState([]);
  const [date, setDate] = useState("");
  const [countdown, setCountdown] = useState(0);
  const activityId = getParameterByName("activityId") || 1;

  const getdataStatistics = () => {
    dataStatistics({ id: activityId}).then((res) => {
      if (res.code == 200) {
        console.log(res);
        setStaticData(res.data);
        if (res.data.endTime) {
          const time = Math.abs(
            dayjs(res.data.endTime).valueOf() - dayjs().valueOf()
          );
          setCountdown(time);
        }
        //setCountdown();
      } else {
        res.message && Toast(res.message);
      }
    });
  };
  const getteam = () => {
    team({ activityId: activityId }).then((res) => {
      if (res.code == 200) {
        setTeamData(res.data);
      } else {
        res.message && Toast(res.message);
      }
    });
  };
  const getnewOrder = () => {
    newOrder({ activityId: activityId }).then((res) => {
      if (res.code == 200) {
        setOrderData(res.data);
      } else {
        res.message && Toast(res.message);
      }
    });
  };
  const getemp = () => {
    emp({ id: activityId }).then((res) => {
      if (res.code == 200) {
        setEmpData(res.data);
      } else {
        res.message && Toast(res.message);
      }
    });
  };
  const getviewList = () => {
    viewList({ id: activityId }).then((res) => {
      if (res.code == 200) {
        setViewData(res.data);
      } else {
        res.message && Toast(res.message);
      }
    });
  };
  useEffect(() => {
    getdataStatistics();
    getteam();
    getemp();
    getnewOrder();
    getviewList();
  }, []);

  useEffect(() => {
    let viewTimer: any;
    viewTimer = setInterval(() => {
      setDate(dayjs().format("YYYY年MM月DD日-HH时:mm分:ss秒"));
    }, 1000);
    return () => clearInterval(viewTimer);
  }, []);

  useEffect(() => {
    let viewTimer: any;
    viewTimer = setInterval(() => {
      getdataStatistics();
      getteam();
      getemp();
      getnewOrder();
      getviewList();
    }, 10000);
    return () => clearInterval(viewTimer);
  }, []);

  const customStyle = (timeData: any) => {
    return (
      <div className="times">
        <span className="block">{timeData.days}</span>
        <span className="colon">天</span>
        <span className="block">{timeData.hours}</span>
        <span className="colon">:</span>
        <span className="block">{timeData.minutes}</span>
        <span className="colon">:</span>
        <span className="block">{timeData.seconds}</span>
      </div>
    );
  };

  return (
    <div className="contaienr">
      <div className="header">
        <span className="header-title">营销大数据</span>
      </div>
      <span className="date">{date}</span>
      <div className="content">
        <div className="left">
          <BorderBox10>
            <div className="one">
              <h2 className="left-title">{staticData.activityName}</h2>
              {countdown !== 0 && (
                <div className="left-countdown">
                  <span className="countdown-title">倒计时</span>
                  <CountDown time={countdown}>{customStyle}</CountDown>
                </div>
              )}
              <ul className="team-list">
                <li>
                  浏览数 <span>{staticData.pv}人</span>
                </li>
                <li>
                  员工数 <span>{staticData.empNum}人</span>
                </li>
                <li>
                  意向客 <span>{staticData.noPayCusNum}人</span>
                </li>
                <li>
                  新客户单数 <span>{staticData.newCusOrderNum}人</span>
                </li>
                <li>
                  老客户客户单数 <span>{staticData.oldCusOrderNum}人</span>
                </li>
                <li>
                  开团数 <span>{staticData.teamNum}个</span>
                </li>
              </ul>
              <h3 className="all-title">团队数据统计</h3>
              <div className="all-table">
                <ol className="all-theader">
                  <li>团队名称</li>
                  <li>订单</li>
                  <li>分享</li>
                  <li>浏览</li>
                </ol>
                <div className="list-one">
                  <div id="teamEle" style={{ animationDuration: teamData.length * 2.5 + 's' }}   className="list-one-body">
                    {teamData.map((item: any, index) => (
                      <ul key={index} className="all-tbody">
                        <li>{item.groupName}</li>
                        <li>{item.orderNum}</li>
                        <li>{item.shareNum}</li>
                        <li>{item.viewNum}</li>
                      </ul>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </BorderBox10>
        </div>
        <div className="center">
          <BorderBox11>
            <div className="one">
              <div className="center-body">
                <h2 className="center-title">
                  已报名
                  <div className="btns">
                    <div className="animate-big">
                      <div className="btn-border"></div>
                      <div>{staticData.totalOrderNum}</div>
                    </div>
                  </div>
                </h2>
                <h3 className="all-title">最新订单</h3>
                <div className="all-table">
                  <ol className="all-theader">
                    <li>姓名</li>
                    <li>时间</li>
                    <li>团队</li>
                    <li>员工</li>
                  </ol>
                  <div className="list-one" id="orderEle" >
                    <div id="teamEle" style={{ animationDuration: orderData.length * 2.5 + 's' }}  className="list-one-body">
                      {orderData.map((item: any, index) => (
                        <ul key={index} className="all-tbody">
                          <li>{item.nickname}</li>
                          <li>{item.createTime}</li>
                          <li>{item.userName}</li>
                          <li>{item.packageLeader}</li>
                        </ul>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </BorderBox11>
        </div>
        <div className="right">
          <BorderBox10>
            <div className="one">
              <div className="right-title">
                <div className="right-title-body">
                  <ul style={{ animationDuration: viewData.length * 2.5 + 's' }} className="right-title-list">
                    {viewData.map((item: any, index) => {
                      if (!item) return null;
                      return (
                        <li key={index}>
                          {<img src={item.avatarUrl || ""} alt="" />}
                          {item.nickname}浏览活动，正在报名!
                        </li>
                      );
                    })}
                  </ul>
                </div>
              </div>
              <h3 className="all-title">员工排名</h3>
              <div className="all-table">
                <ol className="all-theader">
                  <li>排名</li>
                  <li>员工</li>
                  <li>成交订单</li>
                  <li>成交金额</li>
                  <li>分享</li>
                  <li>浏览</li>
                </ol>
                <div className="list-one">
                  <div style={{ animationDuration: empData.length * 2.5 + 's' }}   className="list-one-body">
                    {empData.map((item: any, index) => (
                      <ul key={index} className="all-tbody">
                        <li>{item.sortBy}</li>
                        <li>{item.userName}</li>
                        <li>{item.totalOrderNum}</li>
                        <li>{item.totalAmount}</li>
                        <li>{item.shareNum}</li>
                        <li>{item.viewNum}</li>
                      </ul>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </BorderBox10>
        </div>
      </div>
    </div>
  );
}

export default App;
